<template>
  <!-- 数据报表 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item>
        <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <selector ref="statusSelector"  type="sensorState" size="small" style="width: 160px" clearable placeholder="请选择传感器状态"
                  v-model="queryParams.statusOption"></selector>
      </el-form-item>
      <el-form-item>
        <selector type="sensorType" @change="handleSensorTypeChange" size="small" style="width: 160px" clearable placeholder="请选择传感器类型" v-model="queryParams.sensorType"></selector>
      </el-form-item>
      <!--<el-form-item>-->
        <!--<el-input v-model="queryParams.deviceName" type="text" auto-complete="off" placeholder="模糊搜索传感器名称" clearable-->
          <!--size="small">-->
        <!--</el-input>-->
      <!--</el-form-item>-->
      <el-select v-model="queryParams.deviceName" clearable placeholder="请选择具体传感器">
        <el-option
          v-for="item in sensorList"
          :key="item.device.deviceName"
          :label="item.device.deviceName"
          :value="item.device.deviceName">
        </el-option>
      </el-select>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" size="mini" @click="handleExport" v-hasPermi="['system:post:export']">导出</el-button>
      </el-form-item>
    </el-form>

    <el-row style="display:flex; justify-content: space-around;margin-bottom:20px;">
      <div class="chart-wrapper" style="margin-right: 15px;">
        <line-chart class="canvas-border" :opention="lineChartItem.surfaceDisplacement" height="360px" :width="'100%'" />
      </div>
    </el-row>
    <el-row style="display:flex; justify-content: space-around;margin-bottom:20px;">
      <div class="chart-wrapper" style="margin-right: 15px;">
        <line-chart class="canvas-border" :opention="lineChartItem.conversionRate" :height="chartHeight" :width="'100%'" />
      </div>
      <div class="chart-wrapper" style="">
        <line-chart class="canvas-border" :opention="lineChartItem.velocityChange" :height="chartHeight" :width="'100%'" />
      </div>
    </el-row>

    <el-table v-loading="loading" size="mini" height="420" :data="operationList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="id" label="序号" width="70" align="center" show-overflow-tooltip :formatter="(row, column, cellValue, index)=>index+1"></el-table-column>
      <el-table-column prop="content" label="监测内容" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="measuringName" label="测点名称" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label="传感器类型" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="equipmentName" label="传感器名称" width="150px" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="project" label="监测项" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="site" label="坐标位置" align="center" min-width="160" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="工作状态" align="center" :formatter="statusFormater" show-overflow-tooltip></el-table-column>
      <el-table-column prop="datetime" label="时间" align="center" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="detectionValue" label="当前监测值" align="center" show-overflow-tooltip></el-table-column>

      <el-table-column prop="operation" label="操作" align="center" class-name="small-padding fixed-width" >
        <template slot-scope="scope">
          <el-button size="mini" class="btn" @click="handleViewItemHistory(scope.row)" v-hasPermi="['system:role:edit']">历史记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 监测项历史数据项 -->
    <div class="alarm-dialog">
      <el-dialog :title="dialogTitle" :visible.sync="openDialog" width="25%">
        <el-table v-loading="dialogLoading" size="mini" height="420" :data="itemHistory">
          <el-table-column prop="id" label="序号" width="70" align="center" :formatter="(row, column, cellValue, index)=>index+1" show-overflow-tooltip></el-table-column>
          <el-table-column prop="time" label="时间" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="historyItemName" label="数值(mm)" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import LineChart from "@/views/dashboard/commonTemplate";
  import selector from "@/views/components/selector";
  import { listHistoryBySensor, exportHistory, listHistoryByItem } from "@/api/page/report.js";
  import { listSensorConfiguration } from "@/api/page/device.js"

  export default {
    name: "dataReport",
    components: {
      LineChart,
      selector
    },
    data() {
      return {
        //chart 高度
        chartHeight: "250px",
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 角色表格数据
        operationList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        // 是否打开处置对话框
        openDialog: false,
        //监测项标题
        dialogTitle: "",
        dialogLoading: false,
        itemHistory: [],
        // 日期范围
        dateRange: [],
        sensorList:[],
        title1:"监测项实时数据",
        title2:"监测项变化率",
        title3:"监测项速度变化率",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          statusOption: undefined,
          sensorType: undefined,
          beginTime: undefined,
          endTime: undefined,
          deviceName: undefined
        },
        // 表单参数
        form: {},
        lineChartItem: {
          surfaceDisplacement: {},
          conversionRate: {},
          velocityChange: {}
        },
        // 导出数据
        exportInfo: {},
        pickerOptions: {
          shortcuts: [{
              text: "最近一天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            }
            // {
            //   text: "最近一个月",
            //   onClick(picker) {
            //     const end = new Date();
            //     const start = new Date();
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            //     picker.$emit("pick", [start, end]);
            //   }
            // },
            // {
            //   text: "最近三个月",
            //   onClick(picker) {
            //     const end = new Date();
            //     const start = new Date();
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            //     picker.$emit("pick", [start, end]);
            //   }
            // }
          ]
        },
        chartData: {},
        // 导出加载框
        exportLoading: {
          lock: true,
          text: '正在导出文件，请稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        },
      };
    },
    created() {
      this.dateRange = this.getDateRange();
    },
    mounted(){
      this.queryParams.sensorType = 2;
      this.getSensorList();
    },
    methods: {
      /** 折线图初始化 */
      lineChartInit(list) {
        let self = this;
        let legendData = [];
        let xAxisData = [];
        let seriesData = [];
        let seriesData2 = [];
        let seriesData3 = [];
        var lastLegendNum = 0;
        var xAxisFlag = true;
        var xAxisDataTemp = [];
        var xAxisDataTemp2 = [];
        var xAxisDataTemp3 = [];
        var seriesDataTemp = [];
        if(self.queryParams.deviceName==""){
          self.title1 = "监测项实时数据";
          self.title2 = "监测项变化率";
          self.title3 = "监测项速度变化率";
        }
        else{
          self.title1 = self.queryParams.deviceName+"监测项实时数据";
          self.title2 = self.queryParams.deviceName+"监测项变化率";
          self.title3 = self.queryParams.deviceName+"监测项速度变化率";
        }
        if (list.length) {
          for (var i = 0; i < list.length; i++) {
            var obj = list[i];
            if (obj) {
              var name = obj.keywords;
              var gridArr = obj.grid;
              var data = {};
              lastLegendNum = legendData.length;
              for (let key in gridArr[0]) {
                if (key != "time") {
                  legendData.push(name + "_" + key);
                  data[name + "_" + key] = [];
                }
              }
              var lastGrid = {};
              if (gridArr.length != 0&&xAxisFlag) {
                for (var j = 0; j < gridArr.length; j++) {
                  var grid = gridArr[j];
                  if(list.length>1||self.checkAllDataIsNull(grid)) {
                    xAxisData.push(grid.time);
                  }
                }
                if(xAxisData.length>0){
                  xAxisFlag = false;
                }
              }
              for (var j = 0; j < gridArr.length; j++) {
                var grid = gridArr[j];
                if(list.length>1||self.checkAllDataIsNull(grid)) {
                  for (let key in grid) {
                    if (key != "time") {
                      if (self.checkRate(grid[key])) {
                        data[name + "_" + key].push({value:grid[key],isValid:true});
                        lastGrid[key] = grid[key];
                      } else {
                        // data[name + "_" + key].push('-');
                        data[name + "_" + key].push({value:lastGrid[key],isValid:false});
                      }
                    }
                  }
                }
              }
              for (var k = 0; k < (legendData.length - lastLegendNum); k++) {
                seriesData.push({
                  name: legendData[k + lastLegendNum],
                  type: "line", //这个是展示数据的类型，是柱状图还是折线图，饼状图
                  // stack: legendData[i], // 平滑曲线是stack不能一样，否则会在值的上面叠加
                  showSymbol: true,
                  smooth: true, //这个是把线变成曲线
                  symbol: "circle",
                  symbolSize: 4, //设定实心点的大小
                  hoverAnimation: true,
                  animation: true,
                  data: data[legendData[k+ lastLegendNum]]
                });
                seriesData2.push({
                  name: legendData[k + lastLegendNum],
                  type: "line", //这个是展示数据的类型，是柱状图还是折线图，饼状图
                  symbol: "circle", //设定为实心点
                  symbolSize: 4, //设定实心点的大小
                  smooth: true, //这个是把线变成曲线
                  showSymbol: true,
                });
                seriesData3.push({
                  name: legendData[k + lastLegendNum],
                  type: "line", //这个是展示数据的类型，是柱状图还是折线图，饼状图
                  symbol: "circle", //设定为实心点
                  symbolSize: 4, //设定实心点的大小
                  smooth: true, //这个是把线变成曲线
                  showSymbol: true,
                });
              }
            }
          }

          //重新处理数据 去掉无效值的点；
          for(var i=0;i<xAxisData.length;i++){
            var time = xAxisData[i];
            var timeIsValid = false;
            for(var j =0;j<seriesData.length;j++){
              var dataIsValid = seriesData[j].data[i].isValid;
              if(dataIsValid){
                timeIsValid = true;
              }
            }
            if(timeIsValid){
              xAxisDataTemp.push(time);
              xAxisDataTemp2.push(time);
              xAxisDataTemp3.push(time);
              for(var j =0;j<seriesData.length;j++){
                var value = seriesData[j].data[i].value;
                var isvalid = seriesData[j].data[i].isValid;
                if(seriesDataTemp[j] ==null){
                  seriesDataTemp[j] = [] ;
                }
                seriesDataTemp[j].push({value:value,isValid:isvalid});
              }
            }
          }
          for(var i =0;i<seriesData.length;i++){
            seriesData[i].data = seriesDataTemp[i];
          }

          //处理变化率 和 速度变化率
          for(var i = 0;i<seriesDataTemp.length;i++){
            var dataArr = seriesDataTemp[i];
            var data = [];
            for(var j=0;j<dataArr.length-1;j++){
              var valBefore = dataArr[j].value;
              var valAfter = dataArr[j + 1].value;
              var timeBefore =  new Date(xAxisDataTemp2[j]).getTime()/60000;
              var timeAfter = new Date(xAxisDataTemp2[j+1]).getTime()/60000;
              var val = ((valAfter - valBefore) * 60 / (timeAfter-timeBefore)).toFixed(2);
              if(val>1){
                val = 0.99
              }else if(val<-1){
                val = -0.99
              }
              data.push(val);
            }
            seriesData2[i].data = data;
          }
          for(var i = 0 ;i<seriesData2.length;i++){
            var dataArr = seriesData2[i].data;
            var data = [];
            for(var j=0;j<dataArr.length-1;j++){
              var valBefore = dataArr[j];
              var valAfter = dataArr[j + 1];
              var timeBefore =  new Date(xAxisDataTemp2[j]).getTime()/60000;
              var timeAfter = new Date(xAxisDataTemp2[j+1]).getTime()/60000;
              var val = ((valAfter - valBefore) * 60 / (timeAfter-timeBefore)).toFixed(2);
              if(val>1){
                val = 0.99
              }else if(val<-1){
                val = -0.99
              }
              data.push(val);
            }
            seriesData3[i].data = data;
          }
          xAxisDataTemp2.shift();
          xAxisDataTemp3.shift();
          xAxisDataTemp3.shift();
        }

        self.lineChartItem.surfaceDisplacement = {
          grid: {
            top: "30%",
            bottom: "28px",
            left: "60px",
            right: "60px"
          },
          title: {
            text: self.title1,
            x: "left",
            y: 10,
            textAlign: "left"
          },
          legend: {
            orient: "horizontal", //显示方向horizontal横向，vertical纵向
            x: "center", // 'center' | 'left' | {number}, 横向位置
            y: 40, // 'center' | 'bottom' | {number}, 纵向位置
            backgroundColor: "rgb(255, 255, 255)", // 背景颜色
            borderColor: "rgba(255, 255, 255, 0.8)", // 边框颜色
            borderWidth: 0, //边框
            data: legendData
          },
          dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty',
            start: 90,
            end: 100,
            lineHeight: 10,
            // handleSize:5,
            bottom: 0,
            labelFormatter:function(value,time){
                return time.split(" ")[0] +"\n"+time.split(" ")[1];
            },
            textStyle:{
              lineHeight: 100,
              fontWeight:"bold",
              color:"red"
            }
          }],
          toolbox: {
            show: true,
            right: 30,
            // y: 50,
            // orient: "vertical",
            //要显示的工具箱内容
            feature: {
              saveAsImage: { //保存为图片
                show: true
              },
              magicType: { //动态类型切换
                type: ['bar', 'line']
              }
            }
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line" // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter:function(params){
              var allFalse = true;
              var str = params[0].name+"<br>";
              for(var i =0;i<params.length;i++){
                var obj = params[i];
                var val = "";
                if(obj.data.isValid){
                  val = obj.value;
                  allFalse = false;
                }else{
                  val = "-";
                }
                str += obj.marker+obj.seriesName+"："+val+'<br>';
              }
              if(allFalse){
               return "此时段无数据!";
              }else {
                return str;
              }
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisTick: {
              // 是否显示刻度
              show: false
            },
            data: xAxisDataTemp,
            axisLine: {
              lineStyle: {
                type: "solid"
                // color: 'rgb(235, 238, 245)',
              }
            }
          },
          yAxis: {
            name: "mm", // 给y轴加单位
            type: "value",
            boundaryGap: false,
            axisTick: {
              // 是否显示刻度
              show: false,
              default: false
            },
            axisLine: {
              // 是否显示坐标轴对x,y轴有效
              show: false
            },
            splitNumber: 9, // 有多少个刻度
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            }
          },
          calculable: true,
          series: seriesData
        };
        self.lineChartItem.conversionRate = {
          grid: {
            top: "30%",
            bottom: "28px",
            left: "60px",
            right: "40px"
          },
          title: {
            // x显示的标题
            text: self.title2,
            x: "left",
            y: 10,
            textAlign: "left"
          },
          legend: {
            orient: "horizontal", //显示方向horizontal横向，vertical纵向
            x: 200, // 'center' | 'left' | {number}, 横向位置
            y: 30, // 'center' | 'bottom' | {number}, 纵向位置
            backgroundColor: "rgb(255, 255, 255)", // 背景颜色
            borderColor: "rgba(255, 255, 255, 0.8)", // 边框颜色
            borderWidth: 0, //边框
            data: legendData
          },
          dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty',
            start: 90,
            end: 100,
            lineHeight: 10,
            // handleSize:5,
            bottom: 0,
            labelFormatter:function(value,time){
              return time.split(" ")[0] +"\n"+time.split(" ")[1];
            },
            textStyle:{
              lineHeight: 100,
              fontWeight:"bold",
              color:"red"
            }
          }],
          toolbox: {
            show: true,
            right: 30,
            // y: 50,
            // orient: "vertical",
            //要显示的工具箱内容
            feature: {
              saveAsImage: { //保存为图片
                show: true
              },
              magicType: { //动态类型切换
                type: ['bar', 'line']
              }
            }
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisDataTemp2,
            axisTick: {
              // 是否显示刻度
              show: false
            }
          },
          yAxis: {
            name: "mm/h",
            nameTextStyle: {
              padding: [0, 40, 0, 0]
            },
            type: "value",
            boundaryGap: false,
            // show: false,
            splitNumber: 6,
            axisTick: {
              // 是否显示刻度
              show: false
            },
            axisLine: {
              // 是否显示坐标轴对x,y轴有效
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            }
          },
          calculable: true,
          series: seriesData2
        };
        self.lineChartItem.velocityChange = {
          grid: {
            top: "30%",
            bottom: "28px",
            left: "60px",
            right: "45px"
          },
          title: {
            text: self.title3,
            x: "left",
            y: 10,
            textAlign: "left"
          },
          legend: {
            orient: "horizontal", //显示方向horizontal横向，vertical纵向
            x: 200, // 'center' | 'left' | {number}, 横向位置
            y: 30, // 'center' | 'bottom' | {number}, 纵向位置
            backgroundColor: "rgb(255, 255, 255)", // 背景颜色
            borderColor: "rgba(255, 255, 255, 0.8)", // 边框颜色
            borderWidth: 0, //边框
            data: legendData
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty',
            start: 90,
            end: 100,
            lineHeight: 10,
            // handleSize:5,
            bottom: 0,
            labelFormatter:function(value,time){
              return time.split(" ")[0] +"\n"+time.split(" ")[1];
            },
            textStyle:{
              lineHeight: 100,
              fontWeight:"bold",
              color:"red"
            }
          }],
          toolbox: {
            show: true,
            right: 30,
            // y: 50,
            // orient: "vertical",
            //要显示的工具箱内容
            feature: {
              saveAsImage: { //保存为图片
                show: true
              },
              magicType: { //动态类型切换
                type: ['bar', 'line']
              }
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisDataTemp3,
            axisTick: {
              // 是否显示刻度
              show: false
            }
          },
          yAxis: {
            name: "mm/(h*h)",
            nameTextStyle: {
              padding: [0, 60, 0, 0]
            },
            type: "value",
            boundaryGap: false,
            // show: false,
            splitNumber: 6,
            axisTick: {
              // 是否显示刻度
              show: false
            },
            axisLine: {
              // 是否显示坐标轴对x,y轴有效
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            }
          },
          calculable: true,
          series: seriesData3
        };
      },
      checkAllDataIsNull(grid){
        var flag = false;
        for (let key  in grid) {
          if (key != "time") {
            if(this.checkRate(grid[key])) {
              flag = true;
            }
          }
        }
        return flag;
      },
      checkRate(val) {
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if(regPos.test(val) || regNeg.test(val)) {
          return true;
        } else {
          return false;
        }
      },
      /** 查询监测项数据 */
      getList() {
        let self = this;
        self.loading = true;
        listHistoryBySensor(this.addDateRange(this.queryParams, this.dateRange))
          .then(response => {
            var data = response.data.monitorItem;
            var tableData = [];
            for (var i = 0; i < data.length; i++) {
              var item = data[i];
              var sensor = item.sensor;
              var device = sensor.device;
              var sensorType = sensor.sensorType;
              var point = device.point;
              tableData.push({
                id: item.itemId,
                content: sensor.monitorDetail,
                measuringName: point.pointName,
                type: sensorType.typeName,
                equipmentName: device.deviceName,
                project: item.itemName,
                site: point.lon + "," + point.lat,
                status: device.state,
                datetime: item.valueTime==null?'-':self.handleTimeFarmat(item.valueTime),
                detectionValue: item.itemValue==null?'-': item.itemValue+ item.itemUnit
              });
            }
            self.operationList = tableData;
            self.loading = false;
            var history = response.data.historyData;
            self.lineChartInit(history);
          })
          .catch(err => {
            self.loading = false;
          });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 导出按钮操作 */
      handleExport() {
        let self = this;
        const queryParams = self.queryParams;
        let loading = undefined;
        self.$confirm("是否确认导出所有数据?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(function() {
            loading = self.$loading(self.exportLoading);
            return exportHistory(queryParams);
          })
          .then(response => {
            self.download(response.msg);
            loading.close();
          })
          .catch(function() {
            if (loading != undefined) {
              loading.close();
            }
          });
      },
      // 当选择项发生变化时会触发该事件
      handleSelectionChange(val) {
        console.log(val);
      },
      //时间格式处理
      handleTimeFarmat(val) {
        return val.substring(0, 10) + " " + val.substring(11, 19);
      },
      statusFormater(row, column) {
        let i = this.$refs.statusSelector.getItem(row.status);
        return (i && i.label) || "";
      },
      getDateRange() {
        //昨天的时间
        var day1 = new Date();
        day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
        var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();
        //今天的时间
        var day2 = new Date();
        day2.setTime(day2.getTime());
        var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate();
        return [s1, s2];
      },
      //查看单个监测项的历史数据
      handleViewItemHistory(val) {
        let self = this;
        self.openDialog = true;
        self.dialogTitle = val.equipmentName + "_" + val.project;
        self.dialogLoading = true;
        let id = val.id;
        let type = val.type;
        listHistoryByItem({
          id: id,
          sensorType: type,
          begin: self.dateRange&&self.dateRange[0]?self.dateRange[0]:'',
          end: self.dateRange&&self.dateRange[1]?self.dateRange[1]:''
        }).then(
          response => {
            let arr = response.data;
            var realArr = [];
            for (let i = 0; i < arr.length; i++) {
              if(self.checkRate(arr[i][val.project])) {
                arr[i]["historyItemName"] = arr[i][val.project];
                realArr.push(arr[i]);
              }
            }
            self.itemHistory = realArr;
            self.dialogLoading = false;
          }
        ).catch((error)=> {
          console.log(error);
        });
      },
      getSensorList(){
        var self = this;
        listSensorConfiguration({sensorTypeId:self.queryParams.sensorType}).then(function (res) {
            self.sensorList = res.rows;
            self.queryParams.deviceName = res.rows[0].device.deviceName;
            //渲染表格
            self.getList();
            //渲染折线图
            if (window.innerWidth < 1600) {
              self.chartHeight = "250px";
            }
        });
      },
      getSensorListChange(){
        var self = this;
        listSensorConfiguration({sensorTypeId:self.queryParams.sensorType}).then(function (res) {
          self.sensorList = res.rows;
          self.queryParams.deviceName = res.rows[0].device.deviceName;
        });
      },
      handleSensorTypeChange(e){
        this.queryParams.sensorType = e.value;
        this.getSensorListChange();
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../dataReport.scss";
</style>
